<template>
    <div class="Home">
        <!-- 导航 -->
        <van-nav-bar>
            <template #left>
                <van-icon
                    name="wap-nav"
                    color="#2bd2fc"
                    size="30"
                    @click="MySettings_TB_Fn(true)"
                />
                <div class="Logo"></div>
            </template>
            <template #right>
                <div @click="goSearch">
                    <img src="../assets/206搜索.png" />
                </div>
            </template>
        </van-nav-bar>

        <!-- 轮播图 -->
        <Banner @complete="getRecommendedSongListData" />

        <!-- 小功能(装饰) -->
        <div class="SmallFn_box">
            <div
                class="SmallFn"
                v-for="(item, index) in SmallFnData"
                :key="index"
            >
                <img :src="item.src" alt="" />
                <p>{{ item.title }}</p>
            </div>
        </div>

        <!-- 推荐歌单 -->
        <div class="RecommendedSongList_box section_box">
            <!-- 小标题 -->
            <HomeTitle left_text="推荐歌单" right_text="每日好货" />

            <!-- 歌单内容 -->
            <div class="RecommendedSongList">
                <div
                    class="SongList"
                    v-for="item in RecommendedSongListData"
                    :key="item.id"
                >
                    <!-- 封面 -->
                    <div class="SongList_img">
                        <img :src="item.picUrl" alt="" />
                    </div>
                    <!-- 标题 -->
                    <div class="SongList_title">{{ item.name }}</div>
                    <!-- 特效装饰 -->
                    <div class="record"></div>
                    <div class="glass" @click="goSongSheet(item.id)"></div>
                </div>
            </div>
        </div>

        <!-- 新歌速递 -->
        <div class="NewSongExpress_box section_box">
            <!-- 小标题 -->
            <HomeTitle left_text="新歌速递" right_text="抢先看" />

            <!-- 新歌内容 -->
            <div class="NewSongExpress">
                <div
                    class="NewSong"
                    v-for="(item, index) in NewSongExpressData"
                    :key="index"
                >
                    <div
                        class="HomeNewSong_box"
                        v-for="(v, i) in item"
                        :key="i"
                    >
                        <HomeNewSong :item="v" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 电台节目 -->
        <div class="RadioProgram_box section_box">
            <!-- 小标题 -->
            <HomeTitle left_text="电台节目" right_text="更多" />

            <!-- 电台节目内容 -->
            <div class="RadioProgram">
                <div
                    class="RadioProgram_item_box"
                    v-for="(item, index) in RadioProgramData"
                    :key="index"
                >
                    <!-- 元素 -->
                    <div
                        class="RadioProgram_item"
                        v-for="v in item"
                        :key="v.id"
                    >
                        <!-- 封面 -->
                        <div class="RadioProgram_item_img">
                            <img :src="v.picUrl" alt="" />
                        </div>
                        <!-- 标题 -->
                        <div class="RadioProgram_item_title">
                            {{ v.name }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐MV -->
        <div class="RecommendedMV_box section_box">
            <!-- 小标题 -->
            <HomeTitle left_text="推荐MV" right_text="更多" />
            <!-- MV内容 -->
            <div class="RecommendedMV">
                <!-- 元素 -->
                <div
                    class="RecommendedMV_item"
                    v-for="item in RecommendedMVData"
                    :key="item.id"
                >
                    <!-- 封面 -->
                    <div
                        class="RecommendedMV_img"
                        :style="{
                            backgroundImage: 'url(' + item.picUrl + ')',
                        }"
                    >
                        <!-- 播放按钮 -->
                        <div class="play">
                            <van-icon name="play" color="#fff" size="30" />
                        </div>
                        <!-- 播放次数 -->
                        <div class="RecommendedMV_playCount">
                            {{ item.playCount | playCount_kw }}次播放
                        </div>
                    </div>
                    <!-- 标题 -->
                    <div class="RecommendedMV_title">
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部结束 -->
        <div class="End">
            <p class="p1">
                ·&nbsp;&nbsp;&nbsp;DJQ&nbsp;&nbsp;CREATE&nbsp;&nbsp;&nbsp;·
            </p>
            <p class="p2">END</p>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
const {
    mapState: AccountMapState,
    mapMutations: AccountMapMutations,
    mapGetters: AccountMapGetters,
    mapActions: AccountMapActions
} = createNamespacedHelpers('Account');
import Banner from '../components/swiper/Banner.vue'
import HomeTitle from '../components/HomeTitle.vue'
import HomeNewSong from '../components/HomeNewSong.vue'


export default {
    name: "Home",
    components: {
        Banner,
        HomeTitle,
        HomeNewSong,
    },
    computed: {
        ...AccountMapState(['uid']),
    },

    data() {
        return {

            // 小功能(装饰)数据
            SmallFnData: [
                { title: "TOP", src: require("../assets/tu (2).png") },
                { title: "排行榜", src: require("../assets/tu (3).png") },
                { title: "牛人专区", src: require("../assets/tu (4).png") },
                { title: "经典曲目", src: require("../assets/tu (5).png") },
                { title: "直播", src: require("../assets/tu (6).png") },
            ],

            // 用户界面的推荐歌单数据
            RecommendedSongListData: [
                // {
                //     id: null,
                //     name: null,
                //     picUrl: null
                // }
            ],

            //新歌速递数据
            NewSongExpressData: [
                [
                    // {
                    //     id: null,
                    //     name: null,
                    //     picUrl: null,
                    //     artists: null
                    // },
                ],
                [], []
            ],

            // 电台节目数据
            RadioProgramData: [
                // 电台
                [
                    //     {
                    //     id: null,
                    //     name: null,
                    //     picUrl: null
                    //     },
                ],
                // 节目
                []
            ],

            // 推荐MV数据
            RecommendedMVData: [
                // {
                //     imageUrl: null, //封面     
                //     mainTitle: null, //主标题      
                //     resourceId: null, //资源id
                //     playCount: null, //播放次数
                // }
            ]
        }

    },
    methods: {
        // 弹出我的设置
        ...mapMutations(['MySettings_TB_Fn', 'changemainRouter']),

        // 跳转到歌单路由
        goSongSheet(id) {
            this.$router.push({ name: "SongSheet", query: { id, type: 1 } });
        },

        // 跳转到搜索页面
        goSearch() {
            this.changemainRouter('Search');
            this.$router.push({ name: "Search" });
        },

        //[获取] 用户界面的推荐歌单数据 
        getRecommendedSongListData() {
            this.axios({
                method: "GET",
                url: "/personalized",
                params: { limit: 10 }
            }).then((result) => {
                // console.log("🚀 ==> getRecommendedSongListData ==> result", result);
                if (result.data.code === 200) {
                    result.data.result.forEach((v) => {
                        this.RecommendedSongListData.push({
                            id: v.id,
                            name: v.name,
                            picUrl: v.picUrl + '?param=140y140'
                        })
                    });
                    // console.log("🚀 ==> this.RecommendedSongListData", this.RecommendedSongListData);

                    this.getNewSongExpressData();
                }
            }).catch((err) => {
                console.log("🚀 ==> getRecommendedSongListData ==> err", err);
            });
        },
        //[获取] 新歌速递数据
        getNewSongExpressData() {
            // 随机推荐类型
            let type = [0, 7, 96, 8, 16];
            type = type[Math.floor(Math.random() * type.length)];

            this.axios({
                method: "GET",
                url: "/top/song",
                params: { type }
            }).then((result) => {
                // console.log("🚀 ==> getNewSongExpressData ==> result", result);
                if (result.data.code === 200) {

                    let data = result.data.data.slice(0, 21);
                    let index = 0;
                    data.forEach((v) => {
                        if (this.NewSongExpressData[index].length === 7) {
                            index++;
                        }
                        // 艺术家名字
                        let artists = "";
                        v.artists.forEach((v) => {
                            artists += v.name + ' / '
                        })
                        artists = artists.slice(0, -3);

                        this.NewSongExpressData[index].push({
                            id: v.privilege.id,
                            name: v.name,
                            picUrl: v.album.picUrl + '?param=140y140',
                            artists
                        })
                    })
                    // console.log("🚀 ==> result.data.result.forEach ==> this.NewSongExpressData", this.NewSongExpressData);
                    this.getRadioProgramData();
                }
            }).catch((err) => {
                console.log("🚀 ==> getNewSongExpressData ==> err", err);
            });
        },
        // [获取] 电台节目数据
        getRadioProgramData() {
            this.axios({
                method: "GET",
                url: "/personalized/djprogram"
            }).then((result) => {
                // console.log("🚀1 ==> getRadioProgramData ==> result", result);
                if (result.data.code === 200) {
                    result.data.result.forEach((v) => {
                        this.RadioProgramData[0].push({
                            id: v.id,
                            name: v.name,
                            picUrl: v.picUrl + '?param=140y140'
                        })
                    });
                    // console.log("🚀1 ==> this.RadioProgramData", this.RadioProgramData);


                    this.axios({
                        method: "GET",
                        url: "/program/recommend"
                    }).then((result) => {
                        // console.log("🚀2 ==> getRadioProgramData ==> result", result);
                        if (result.data.code === 200) {
                            result.data.programs.forEach((v) => {
                                this.RadioProgramData[1].push({
                                    id: v.id,
                                    name: v.name,
                                    picUrl: v.coverUrl + '?param=140y140'
                                })
                            });
                            // console.log("🚀2 ==> this.RadioProgramData", this.RadioProgramData);
                            this.getRecommendedMVData();
                        }
                    }).catch((err) => {
                        console.log("🚀 ==> getRadioProgramData ==> err", err);
                    });
                }
            }).catch((err) => {
                console.log("🚀 ==> getRadioProgramData ==> err", err);
            });


        },
        // [获取] 推荐MV数据
        getRecommendedMVData() {
            this.axios({
                method: "GET",
                url: "/mv/all",
            }).then((result) => {
                // console.log("🚀 ==> getRecommendedMVData ==> result", result);
                if (result.data.code === 200) {
                    result.data.data.forEach((v) => {
                        if (this.RecommendedMVData.length < 6) {
                            this.RecommendedMVData.push({
                                id: v.id,
                                name: v.name,
                                picUrl: v.cover,
                                playCount: v.playCount,
                                artistId: v.artistId,
                            });
                        };
                    });
                    // console.log("🚀 ==> this.RecommendedMVData", this.RecommendedMVData);

                    if (this.uid) {
                        this.getStatus(this.uid);
                    }
                }
            }).catch((err) => {
                console.log("🚀 ==> getRecommendedMVData ==> err", err);

            });

        },

        // [获取] 用户登录信息
        getStatus(uid) {
            this.axios({
                method: "GET",
                url: "/user/detail",
                params: { uid }
            }).then((result) => {
                console.log("🚀 ==> getStatus ==> result", result);
                if (result.data.code === 200) {
                    this.changeStateProperty({ key: "avatarUrl", value: result.data.profile.avatarUrl });
                    this.changeStateProperty({ key: "nickname", value: result.data.profile.nickname });
                    this.changeStateProperty({ key: "signature", value: result.data.profile.signature });
                    this.changeStateProperty({ key: "level", value: result.data.level });
                }
            }).catch((err) => {
                console.log("🚀 ==> getStatus ==> err", err);
            });
        },


        ...AccountMapMutations(['changeStateProperty']),
    },
    filters: {
        // 千分位
        playCount_kw: (value) => {
            let b = String(value).split("");
            let c = b.length;
            for (let i = c - 3; i > 0; i -= 3) { b.splice(i, 0, ","); }
            return b.join("");
        }
    },
    created() {
        let uid = localStorage.getItem('uid');
        if (uid) {
            this.changeStateProperty({ key: "uid", value: uid })
        }

        // this.getRecommendedSongListData();
        // this.getNewSongExpressData();
        // this.getRadioProgramData();
        // this.getRecommendedMVData();
        // this.getStatus(uid);
    },
}
</script>

<style lang="less">
.Home {
    position: fixed;
    overflow: scroll;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0f0f1e;

    // 导航
    .van-nav-bar {
        position: sticky;
        top: 0;
        z-index: 6;

        .van-nav-bar__content {
            background-color: #131226;

            &::before {
                content: '';
                position: absolute;
                height: 1px;
                width: 100%;
                background: radial-gradient(#3e3afe, #ae0ee0);
                bottom: 0px;
                z-index: 1;
            }
            // 导航 左边
            .van-nav-bar__left {
                color: #fff;
                font-weight: 600;
                font-size: 20px;

                .Logo {
                    width: 150px;
                    height: 46px;
                    background-color: #fff;
                    background: url('../assets/Logo.png') no-repeat center
                        center;
                    background-size: contain;
                    margin-left: 8px;
                }
            }
            // 导航 右边
            .van-nav-bar__right {
                img {
                    display: block;
                    height: 32px;
                }
            }
        }
    }

    // 小功能(装饰)
    .SmallFn_box {
        margin-top: 25px;
        display: flex;
        justify-content: space-around;
        color: #fff;

        .SmallFn {
            display: flex;
            flex-flow: column;
            align-items: center;

            img {
                width: 60px;
                height: auto;
                display: block;
                margin-bottom: 4px;
                border-radius: 50%;
            }
        }
    }

    .section_box {
        margin-top: 80px;
    }
    // 推荐歌单
    .RecommendedSongList_box {
        color: #fff;
        // 推荐歌单 内容区
        .RecommendedSongList {
            display: flex;
            overflow: scroll;
            padding: 0 15px;
            // 歌单元素
            .SongList {
                flex-shrink: 0;
                width: 110px;
                margin-right: 80px;
                position: relative;

                // 歌单封面
                .SongList_img {
                    height: 110px;
                    width: 100%;
                    display: flex;
                    margin-bottom: 10px;
                    border-radius: 3px;
                    background-image: url('../assets/singer.png');
                    background-size: cover;
                    background-position: center center;

                    img {
                        width: 100%;
                        height: auto;
                        border-radius: 3px;
                    }
                }

                // 歌单标题
                .SongList_title {
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    font-size: 13px;
                }

                // 背后唱片
                .record {
                    position: absolute;
                    right: -45px;
                    top: 0;
                    z-index: -1;
                    width: 110px;
                    height: 110px;
                    background: url('../assets/snipaste20211123_193409.png')
                        no-repeat center center;
                    background-size: 111px;
                    border-radius: 50%;
                    transform: rotate(-10deg);
                }

                // 玻璃框
                .glass {
                    position: absolute;
                    border-radius: 3px;
                    top: 0;
                    width: 110px;
                    height: 110px;
                    background: url('../assets/coverall.png') 0 0 no-repeat;
                    background-size: 300px;
                }
            }
        }
    }

    // 新歌速递
    .NewSongExpress_box {
        .NewSongExpress {
            .NewSong {
                display: flex;
                overflow: scroll;
                padding: 0 15px;
                margin-bottom: 20px;
                .HomeNewSong_box {
                    flex-shrink: 0;
                    width: 340px;
                    margin-right: 12px;
                }
            }
        }
    }

    // 电台节目
    .RadioProgram_box {
        .RadioProgram {
            .RadioProgram_item_box {
                display: flex;
                overflow: scroll;
                padding: 0 15px;
                margin-bottom: 20px;

                .RadioProgram_item {
                    position: relative;
                    flex-shrink: 0;
                    width: 105px;
                    margin-right: 15px;

                    .RadioProgram_item_img {
                        margin-bottom: 8px;
                        img {
                            width: 100%;
                            height: 105px;
                            display: block;
                            border-radius: 10px;
                        }
                    }
                    .RadioProgram_item_title {
                        color: #fff;
                        line-height: 18px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }

    // 推荐MV
    .RecommendedMV_box {
        .RecommendedMV {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 15px;

            .RecommendedMV_item {
                width: 46%;
                margin-bottom: 15px;

                .RecommendedMV_img {
                    width: 100%;
                    position: relative;
                    height: 100px;
                    background-size: cover;
                    background-position: center center;
                    background-repeat: no-repeat;
                    margin-bottom: 6px;

                    .play {
                        position: absolute;
                        top: calc(50% - 20px);
                        left: calc(50% - 20px);
                        padding: 5px;
                        background-color: rgba(0, 0, 0, 0.4);
                        border-radius: 50%;
                    }
                    .RecommendedMV_playCount {
                        position: absolute;
                        top: 2px;
                        left: 2px;
                        color: #bebebe;
                    }
                }
            }

            .RecommendedMV_title {
                font-size: 13px;
                color: #fff;
                line-height: 18px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    // 结束
    .End {
        margin-top: 60px;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        letter-spacing: 1px;

        .p1 {
            background-image: linear-gradient(90deg, #e652d8, #2b97fc);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .p2 {
            color: #666;
            margin-bottom: 115px;
        }
    }
}
</style>
